<template>
  <div class="custom-header-c w-full overflow-hidden" :style="wrapStyle" :class="fixed ? 'fixed top-0 left-0 z-[10]' : ''">
    <image v-if="backgroundImage" class="text-0 absolute left-0 top-0 w-full" :class="backgroundImageClass" :src="backgroundImage" />
    <div class="relative z-100 flex w-full items-center">
      <div v-if="showBack" class="left-c pl-34" @click.stop="handleBack">
        <slot name="left">
          <div>
            <image src="../../static/images/back.png" class="h-34 w-20" />
          </div>
        </slot>
      </div>
      <div class="center-c mr-54 flex items-center justify-center" :style="{ width: titleWidth + 'px' }">
        <slot name="title">{{ title || '' }}</slot>
      </div>
      <div class="right-c" />
    </div>
  </div>
  <!-- 占位 -->
  <div v-if="fixed" :style="wrapStyle" />
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useSystemStore } from '@/store'
// 定义 defineProps 属性title: string
const { title, showBack, fixed, backgroundImage, backgroundImageClass } = defineProps<{
  title?: string
  showBack?: boolean
  fixed?: boolean
  backgroundImage?: string
  backgroundImageClass?: string
}>()
/* 处理组件高度和边距 */
const systemStore = useSystemStore()
const capsuleInfo = systemStore.navigationBarInfo
const systemInfo = systemStore.systemInfo
const wrapStyle = {
  paddingTop: `${systemInfo.statusBarHeight}px`,
  // 胶囊高度
  height: `${capsuleInfo.bottom + 8}px`,
  // 胶囊底部距离
  paddingBottom: '8px'
}
// title的宽度为屏幕宽度-胶囊宽度-返回区域宽度
const titleWidth = computed(() => {
  return systemInfo.screenWidth - capsuleInfo.left - 40
})

const handleBack = () => {
  uni.navigateBack()
}

onMounted(() => {})

defineExpose({
  wrapStyle
})
</script>

<style scoped lang="scss">
.custom-header-c {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .center-c {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
